<template>
  <div class="goods-image">
    <div class="video" v-show="video&&showVideo" @mouseenter="controls=true"  @mouseleave="controls=false">
      <video ref="video" :src="video" :controls="controls" @ended="showVideo=false"></video>
      <i v-show="controls" class="iconfont icon-guanbi" @click="hide()"></i>
    </div>
    <div
      class="large"
      v-show="showMask"
      :style="[largeStyle, { backgroundImage: `url(${currImage})` }]"
    ></div>
    <div
      class="middle"
      @mousemove="move"
      @mouseleave="showMask = false"
      ref="box"
    >
      <img v-if="currImage" :src="currImage" alt="" />
      <div class="mask" :style="maskStyle" v-show="showMask"></div>
      <i v-show="!(video&&showVideo)" class="iconfont icon-arrow-down01" @click="play()"></i>
    </div>
    <div class="small">
      <ul>
        <li
          v-for="(item, i) in images"
          :key="item.id"
          :class="{ active: i === currIndex }"
          @click="selectedImg(i)"
        >
          <img :src="item" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goods-image',
  props: {
    images: {
      type: Array,
      default: () => []
    },
    video: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      controls: false,
      showVideo: true,
      currIndex: 0,
      maskStyle: {
        left: 0,
        top: 0
      },
      showMask: false,
      zoom: 2,
      largeStyle: {
        backgroundPosition: '0px 0px'
      }
    }
  },
  computed: {
    // 当前显示的图
    currImage () {
      return this.images[this.currIndex] || ''
    }
  },
  methods: {
    selectedImg (i) {
      this.currIndex = i
      this.showVideo = false
      this.$refs.video.pause()
    },
    hide () {
      this.showVideo = false
      this.$refs.video.pause()
    },
    play () {
      this.showVideo = true
      this.$refs.video.load()
      this.$refs.video.play()
    },
    // 移动鼠标
    move (e) {
      if (!this.showMask) {
        this.maskStyle = { left: '0px', top: '0px' }
        this.showMask = true
      }
      let { offsetLeft, offsetTop, offsetParent } = this.$refs.box
      // 累加父级定位容器偏移
      while (offsetParent) {
        offsetLeft += offsetParent.offsetLeft
        offsetTop += offsetParent.offsetTop
        offsetParent = offsetParent.offsetParent
      }
      // 盒子，遮罩
      const boxSize = { width: 400, height: 400 }
      const maskSize = { width: 200, height: 200 }
      let left = e.pageX - offsetLeft - maskSize.width / 2
      if (left < 0) left = 0
      if (left > boxSize.width / 2) left = boxSize.width / 2
      let top = e.pageY - offsetTop - maskSize.height / 2
      if (top < 0) top = 0
      if (top > boxSize.height / 2) top = boxSize.height / 2
      // 设置遮罩定位
      this.maskStyle = { left: `${left}px`, top: `${top}px` }
      // 大图背景定位
      this.largeStyle.backgroundPosition = `${-left * this.zoom}px ${-top * this.zoom}px`
    }
  }
}
</script>

<style scoped lang='less'>
.goods-image {
  width: 480px;
  height: 400px;
  display: flex;
  position: relative;
  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
    .mask {
      width: 200px;
      height: 200px;
      background: rgba(0, 0, 0, 0.2);
      position: absolute;
      left: 0;
      top: 0;
    }
    .iconfont {
      width: 28px;
      height: 28px;
      border:1px solid #ccc;
      color: #fff;
      border-radius: 50%;
      position: absolute;
      left: 0px;
      bottom: 0px;
      z-index: 1;
      font-size: 12px;
      text-align: center;
      line-height: 28px;
      cursor: pointer;
      transform: rotate(-90deg);
      margin: 10px;
      background-color: rgba(0,0,0,.1);
    }
  }
  .large {
    position: absolute;
    left: 412px;
    top: 0;
    width: 400px;
    height: 400px;
    background-color: #f5f5f5;
    background-size: 800px 800px;
    background-repeat: none;
    z-index: 888;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
  .small {
    width: 80px;
    height: 400px;
    ul {
      li {
        width: 68px;
        height: 68px;
        margin-bottom: 15px;
        margin-left: 12px;
        border: 2px solid transparent;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
        &.active,
        &:hover {
          border-color: @xtxColor;
        }
      }
    }
  }
  .video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 889;
    background: #333;
    width: 400px;
    height: 400px;
    video {
      width: 100%;
      height: 100%;
    }
    .iconfont {
      width: 28px;
      height: 28px;
      border:1px solid #fff;
      color: #fff;
      border-radius: 50%;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 12px;
      text-align: center;
      line-height: 28px;
      cursor: pointer;
    }
  }
}
</style>
